// 获取元素
let reInp = document.querySelectorAll('.re-inp')
console.log(reInp);
let reInpBoxDiv = document.querySelectorAll('.re-inp-box div')
console.log(reInpBoxDiv);
let reBtn = document.querySelector('.re-btn')
console.log(reBtn);
let changeBtn = document.querySelector('.change-btn')
console.log(changeBtn);
// 定义正则表达式保存验证规则
let regArr = [
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^1[3456789][0-9]{9}$/, //11  : 
    /^[a-zA-Z]\w{3}$/,      //4位验证码: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
]

// 需求1, 失去焦点验证, 验证账号 手机验证码 手机号 密码
reInp.forEach(function (dom, i) {
    dom.addEventListener('blur', function () {
        // 失去焦点,验证输入信息的合法性
        let bool = regArr[i].test(dom.value);
        // 判断
        if (bool) {
            reInpBoxDiv[i].style.display = 'none'
        } else {
            reInpBoxDiv[i].style.display = 'block'
        }

    })
})

// 需求2: 点击注册按钮,验证账号 手机验证码 手机号 密码
reBtn.addEventListener('click', function () {
    for (let i = 0; i < reInp.length; i++) {
        // 失去焦点,验证输入信息的合法性
        let bool = regArr[i].test(reInp[i].value);
        // 判断
        if (bool) {
            reInpBoxDiv[i].style.display = 'none'
            location.href = '../page/home.html'
        } else {
            reInpBoxDiv[i].style.display = 'block'
        }

    }
})


//  需求3: 点击change-btn,切换注册点击的状态
changeBtn.addEventListener('change', function () {
    // 获取当前changeBtn的选中状态
    if (changeBtn.checked) {
        reBtn.style.backgroundColor = 'deepskyblue'
        reBtn.disabled = false//取消禁用
    } else {
        reBtn.style.backgroundColor = '#ccc'
        reBtn.disabled = true//禁用
    }
})
